<template>
  <div class="safe-checkin-detail">
    <div class="page-header">
      <h1>安心入住指南</h1>
      <p>为您提供全方位的入住保障和贴心服务</p>
    </div>

    <div class="content-container">
      <!-- 入住流程 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h2>入住流程</h2>
          </div>
        </template>
        <div class="process-steps">
          <el-steps :active="4" align-center>
            <el-step title="咨询了解" description="了解服务内容和收费标准"></el-step>
            <el-step title="健康评估" description="专业健康检查和评估"></el-step>
            <el-step title="签订协议" description="签订入住协议和缴费"></el-step>
            <el-step title="安心入住" description="正式入住享受服务"></el-step>
          </el-steps>
        </div>
      </el-card>

      <!-- 入住准备 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h2>入住准备</h2>
          </div>
        </template>
        <div class="preparation-list">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="preparation-item">
                <h3>📋 必备材料</h3>
                <ul>
                  <li>长者身份证原件及复印件</li>
                  <li>近期体检报告</li>
                  <li>医保卡、社保卡</li>
                  <li>紧急联系人信息</li>
                  <li>既往病史资料</li>
                </ul>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="preparation-item">
                <h3>🎒 个人物品</h3>
                <ul>
                  <li>换洗衣物（适量）</li>
                  <li>洗漱用品</li>
                  <li>常用药品</li>
                  <li>个人护理用品</li>
                  <li>喜爱的书籍或物品</li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 服务保障 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h2>服务保障体系</h2>
          </div>
        </template>
        <div class="service-guarantee">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="guarantee-item">
                <div class="icon">🏥</div>
                <h3>医疗保障</h3>
                <p>24小时医护值班，定期健康检查，紧急医疗救助，药品管理服务</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="guarantee-item">
                <div class="icon">🍽️</div>
                <h3>餐饮保障</h3>
                <p>营养师配餐，特殊饮食需求，食品安全监控，多样化菜单选择</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="guarantee-item">
                <div class="icon">🛏️</div>
                <h3>居住保障</h3>
                <p>舒适居住环境，定期清洁服务，设施维护，安全保障措施</p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
              <div class="guarantee-item">
                <div class="icon">👥</div>
                <h3>护理保障</h3>
                <p>专业护工团队，个性化护理计划，日常照护服务，康复训练指导</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="guarantee-item">
                <div class="icon">🎭</div>
                <h3>活动保障</h3>
                <p>丰富文娱活动，社交互动机会，兴趣小组，节日庆祝活动</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="guarantee-item">
                <div class="icon">📞</div>
                <h3>沟通保障</h3>
                <p>家属沟通渠道，定期情况汇报，在线信息查询，紧急联系机制</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 入住须知 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h2>入住须知</h2>
          </div>
        </template>
        <div class="checkin-notice">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="探访规定" name="1">
              <div class="notice-content">
                <h4>探访时间</h4>
                <p>周一至周日：上午9:00-11:30，下午14:00-17:00</p>
                <h4>探访要求</h4>
                <ul>
                  <li>请在前台登记个人信息</li>
                  <li>探访期间请保持安静，避免影响其他长者休息</li>
                  <li>如需带长者外出，请提前申请并办理相关手续</li>
                  <li>特殊时期探访安排以最新通知为准</li>
                </ul>
              </div>
            </el-collapse-item>
            <el-collapse-item title="费用说明" name="2">
              <div class="notice-content">
                <h4>费用包含</h4>
                <ul>
                  <li>住宿费（含水电、网络）</li>
                  <li>基础护理服务费</li>
                  <li>三餐营养餐费</li>
                  <li>日常活动组织费</li>
                  <li>公共设施使用费</li>
                </ul>
                <h4>额外费用</h4>
                <ul>
                  <li>特殊医疗护理服务</li>
                  <li>个性化康复训练</li>
                  <li>外出陪同服务</li>
                  <li>特殊饮食需求</li>
                </ul>
              </div>
            </el-collapse-item>
            <el-collapse-item title="安全规定" name="3">
              <div class="notice-content">
                <h4>消防安全</h4>
                <ul>
                  <li>禁止在房间内使用明火</li>
                  <li>禁止私拉乱接电线</li>
                  <li>熟悉安全出口位置</li>
                  <li>定期参加消防演练</li>
                </ul>
                <h4>人身安全</h4>
                <ul>
                  <li>外出需向工作人员报备</li>
                  <li>贵重物品请妥善保管</li>
                  <li>遇紧急情况按呼叫铃</li>
                  <li>遵守院内各项管理规定</li>
                </ul>
              </div>
            </el-collapse-item>
            <el-collapse-item title="服务调整" name="4">
              <div class="notice-content">
                <h4>服务升级</h4>
                <p>如需升级护理等级或增加服务项目，请提前3个工作日申请</p>
                <h4>协议变更</h4>
                <p>协议期内如需变更服务内容，双方协商一致后签订补充协议</p>
                <h4>退住流程</h4>
                <p>提前15个工作日书面申请，结清相关费用，办理退住手续</p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-card>

      <!-- 紧急联系 -->
      <el-card class="section-card">
        <template #header>
          <div class="card-header">
            <h2>紧急联系方式</h2>
          </div>
        </template>
        <div class="emergency-contact">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="contact-item">
                <h3>📞 前台服务</h3>
                <p>电话：022-12345678</p>
                <p>服务时间：24小时</p>
                <p>负责：日常咨询、接待服务</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="contact-item">
                <h3>🏥 医疗急救</h3>
                <p>电话：022-87654321</p>
                <p>服务时间：24小时</p>
                <p>负责：医疗救助、健康咨询</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="contact-item">
                <h3>👮 安全管理</h3>
                <p>电话：022-23456789</p>
                <p>服务时间：24小时</p>
                <p>负责：安全事务、紧急处理</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 行动按钮 -->
      <div class="action-buttons">
        <el-button type="primary" size="large" @click="goToConsult">
          <el-icon><ChatDotRound /></el-icon>
          在线咨询
        </el-button>
        <el-button type="success" size="large" @click="goToAgreement">
          <el-icon><Document /></el-icon>
          签订协议
        </el-button>
        <el-button type="info" size="large" @click="downloadGuide">
          <el-icon><Download /></el-icon>
          下载指南
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ChatDotRound, Document, Download } from '@element-plus/icons-vue'

const router = useRouter()
const activeNames = ref(['1'])

const goToConsult = () => {
  router.push('/consult-detail')
}

const goToAgreement = () => {
  router.push('/agreement-signing')
}

const downloadGuide = () => {
  ElMessage.success('入住指南下载链接已生成，请查看下载列表')
  // 模拟下载功能
  setTimeout(() => {
    const link = document.createElement('a')
    link.href = '/documents/safe-checkin-guide.pdf'
    link.download = '安心入住指南.pdf'
    link.click()
  }, 1000)
}
</script>

<style scoped>
.safe-checkin-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.page-header {
  text-align: center;
  color: white;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.page-header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.process-steps {
  padding: 20px 0;
}

.preparation-list {
  padding: 10px 0;
}

.preparation-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  height: 100%;
}

.preparation-item h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.preparation-item ul {
  list-style: none;
  padding: 0;
}

.preparation-item li {
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
}

.preparation-item li:last-child {
  border-bottom: none;
}

.service-guarantee {
  padding: 10px 0;
}

.guarantee-item {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 12px;
  color: white;
  height: 100%;
  transition: transform 0.3s ease;
}

.guarantee-item:hover {
  transform: translateY(-5px);
}

.guarantee-item .icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.guarantee-item h3 {
  margin-bottom: 15px;
  font-size: 1.3rem;
}

.guarantee-item p {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
}

.checkin-notice {
  padding: 10px 0;
}

.notice-content h4 {
  color: #2c3e50;
  margin: 15px 0 10px 0;
}

.notice-content h4:first-child {
  margin-top: 0;
}

.notice-content ul {
  list-style: none;
  padding: 0;
}

.notice-content li {
  padding: 5px 0;
  color: #495057;
  position: relative;
  padding-left: 15px;
}

.notice-content li:before {
  content: "•";
  color: #667eea;
  position: absolute;
  left: 0;
}

.emergency-contact {
  padding: 10px 0;
}

.contact-item {
  text-align: center;
  padding: 25px 15px;
  background: #e3f2fd;
  border-radius: 10px;
  border-left: 4px solid #2196f3;
  height: 100%;
}

.contact-item h3 {
  color: #1976d2;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.contact-item p {
  margin: 8px 0;
  color: #455a64;
  font-size: 0.95rem;
}

.action-buttons {
  text-align: center;
  margin-top: 40px;
  padding: 30px;
}

.action-buttons .el-button {
  margin: 0 15px;
  padding: 15px 30px;
  font-size: 1.1rem;
  border-radius: 25px;
}

.action-buttons .el-button .el-icon {
  margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .safe-checkin-detail {
    padding: 10px;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .preparation-list .el-col,
  .service-guarantee .el-col,
  .emergency-contact .el-col {
    margin-bottom: 20px;
  }
  
  .action-buttons .el-button {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}
</style>
